<template>
  <div class="user-list">
    <div class="list-header">
      <h3>用户列表</h3>
      <div class="header-actions">
        <div class="search-box">
          <input
            type="text"
            placeholder="搜索用户..."
            v-model="searchQuery"
            class="search-input"
            @focus="showSearchHistory = true"
            @blur="hideSearchHistory"
          >
          <!-- 搜索历史下拉 -->
          <div v-if="showSearchHistory && searchHistory.length > 0" class="search-history-dropdown">
            <div class="search-history-header">
              <span>搜索历史</span>
              <button @click="clearSearchHistory" class="clear-history-btn">清除</button>
            </div>
            <div 
              v-for="(term, index) in searchHistory.slice(-5)" 
              :key="index"
              class="search-history-item"
              @click="useSearchTerm(term.query)"
            >
              <span class="history-query">{{ term.query }}</span>
              <span class="history-time">{{ formatRelativeTime(term.timestamp) }}</span>
            </div>
          </div>
          <!-- 搜索统计 -->
          <div class="search-stats">
            搜索次数: {{ searchCount }} | 结果: {{ filteredUsers.length }}
          </div>
        </div>
        <div class="filter-buttons">
          <button
            v-for="filter in filters"
            :key="filter.key"
            :class="['filter-btn', { active: activeFilter === filter.key }]"
            @click="setFilter(filter.key)"
          >
            {{ filter.label }}
            <span v-if="filter.count !== undefined" class="filter-count">({{ filter.count }})</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 实时统计面板 -->
    <div class="real-time-stats">
      <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-info">
          <h4>总用户数</h4>
          <p>{{ userStore.totalUsersCount }}</p>
          <small class="stat-change" :class="userChangeClass">{{ userChangeText }}</small>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-info">
          <h4>活跃用户</h4>
          <p>{{ userStore.activeUsersCount }}</p>
          <small>{{ activeUserPercentage }}%</small>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">👑</div>
        <div class="stat-info">
          <h4>管理员</h4>
          <p>{{ userStore.getUsersByRole('admin').length }}</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">📊</div>
        <div class="stat-info">
          <h4>列表性能</h4>
          <p>{{ renderTime }}ms</p>
          <small :class="performanceClass">{{ performanceText }}</small>
        </div>
      </div>
    </div>

    <div class="user-table">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>注册时间</th>
            <th v-if="canManageUsers">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in paginatedUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>
              <div class="user-info">
                <div class="user-avatar">{{ user.name.charAt(0) }}</div>
                <span>{{ user.name }}</span>
              </div>
            </td>
            <td>{{ user.email }}</td>
            <td>
              <span class="role-badge" :class="user.role">
                {{ getRoleText(user.role) }}
              </span>
            </td>
            <td>
              <span class="status-badge" :class="user.status">
                {{ getStatusText(user.status) }}
              </span>
            </td>
            <td>{{ user.createdAt }}</td>
            <td v-if="canManageUsers">
              <div class="action-buttons">
                <button 
                  class="btn-action edit" 
                  @click="editUser(user)"
                  :disabled="!canEditUser(user)"
                >
                  编辑
                </button>
                <button 
                  class="btn-action delete" 
                  @click="confirmDelete(user)"
                  :disabled="!canDeleteUser(user)"
                >
                  删除
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div v-if="filteredUsers.length === 0" class="empty-state">
        <div class="empty-icon">😔</div>
        <p>没有找到符合条件的用户</p>
        <button v-if="searchQuery" @click="clearSearch" class="btn-clear-search">
          清除搜索条件
        </button>
      </div>
    </div>

    <div class="pagination">
      <div class="pagination-info">
        <span>共 {{ filteredUsers.length }} 条记录，第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
        <span class="load-time">加载时间: {{ lastLoadTime }}ms</span>
      </div>
      <div class="pagination-controls">
        <button 
          class="page-btn" 
          :disabled="currentPage === 1"
          @click="goToPage(currentPage - 1)"
        >
          上一页
        </button>
        <button 
          v-for="page in visiblePages" 
          :key="page"
          :class="['page-btn', { active: page === currentPage }]"
          @click="goToPage(page)"
        >
          {{ page }}
        </button>
        <button 
          class="page-btn"
          :disabled="currentPage === totalPages"
          @click="goToPage(currentPage + 1)"
        >
          下一页
        </button>
      </div>
    </div>

    <!-- 删除确认模态框 -->
    <div v-if="showDeleteModal" class="delete-modal" @click="cancelDelete">
      <div class="modal-content" @click.stop>
        <h3>确认删除</h3>
        <p>确定要删除用户 <strong>{{ userToDelete?.name }}</strong> 吗？</p>
        <div class="modal-actions">
          <button class="btn-cancel" @click="cancelDelete">取消</button>
          <button class="btn-confirm" @click="deleteUser">确认删除</button>
        </div>
      </div>
    </div>

    <!-- 性能监控面板 -->
    <div v-if="showPerformancePanel" class="performance-panel">
      <h4>性能监控</h4>
      <div class="performance-metrics">
        <div class="metric">
          <label>列表渲染时间:</label>
          <span>{{ renderTime }}ms</span>
        </div>
        <div class="metric">
          <label>搜索响应时间:</label>
          <span>{{ searchTime }}ms</span>
        </div>
        <div class="metric">
          <label>内存使用:</label>
          <span>{{ memoryUsage }}MB</span>
        </div>
        <div class="metric">
          <label>组件更新次数:</label>
          <span>{{ updateCount }}</span>
        </div>
      </div>
      <button @click="showPerformancePanel = false" class="close-panel-btn">关闭</button>
    </div>

    <!-- 性能监控按钮 -->
    <button 
      @click="showPerformancePanel = !showPerformancePanel" 
      class="performance-toggle-btn"
      title="性能监控"
    >
      📊
    </button>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
import { useUserStore } from '../stores/user'
import { useRoute } from 'vue-router'

const userStore = useUserStore()
const route = useRoute()

// 响应式数据
const searchQuery = ref('')
const activeFilter = ref('all')
const currentPage = ref(1)
const pageSize = ref(10)
const showDeleteModal = ref(false)
const userToDelete = ref(null)
const showSearchHistory = ref(false)
const searchHistory = ref([])
const searchCount = ref(0)
const showPerformancePanel = ref(false)

// 性能监控相关
const renderTime = ref(0)
const searchTime = ref(0)
const lastLoadTime = ref(0)
const memoryUsage = ref(0)
const updateCount = ref(0)
const previousUserCount = ref(0)

// 过滤选项（动态计算数量）
const filters = computed(() => [
  { key: 'all', label: '全部', count: userStore.users.length },
  { key: 'active', label: '活跃', count: userStore.users.filter(u => u.status === 'active').length },
  { key: 'inactive', label: '禁用', count: userStore.users.filter(u => u.status === 'inactive').length },
  { key: 'admin', label: '管理员', count: userStore.getUsersByRole('admin').length },
  { key: 'user', label: '普通用户', count: userStore.getUsersByRole('user').length }
])

// 计算属性
const filteredUsers = computed(() => {
  const startTime = performance.now()
  
  let users = userStore.users
  
  // 根据搜索查询过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    users = users.filter(user => 
      user.name.toLowerCase().includes(query) ||
      user.email.toLowerCase().includes(query)
    )
  }
  
  // 根据活跃过滤器过滤
  if (activeFilter.value !== 'all') {
    if (activeFilter.value === 'active' || activeFilter.value === 'inactive') {
      users = users.filter(user => user.status === activeFilter.value)
    } else {
      users = users.filter(user => user.role === activeFilter.value)
    }
  }
  
  // 计算搜索时间
  searchTime.value = Math.round(performance.now() - startTime)
  
  return users
})

const paginatedUsers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredUsers.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredUsers.value.length / pageSize.value)
})

const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = currentPage.value
  
  // 显示当前页前后2页
  for (let i = Math.max(1, current - 2); i <= Math.min(total, current + 2); i++) {
    pages.push(i)
  }
  
  return pages
})

const canManageUsers = computed(() => {
  return userStore.hasPermission('write')
})

const activeUserPercentage = computed(() => {
  const total = userStore.totalUsersCount
  const active = userStore.activeUsersCount
  return total > 0 ? Math.round((active / total) * 100) : 0
})

const userChangeText = computed(() => {
  const current = userStore.totalUsersCount
  const previous = previousUserCount.value
  const change = current - previous
  
  if (change > 0) return `+${change}`
  if (change < 0) return `${change}`
  return '无变化'
})

const userChangeClass = computed(() => {
  const current = userStore.totalUsersCount
  const previous = previousUserCount.value
  const change = current - previous
  
  if (change > 0) return 'positive'
  if (change < 0) return 'negative'
  return 'neutral'
})

const performanceClass = computed(() => {
  if (renderTime.value < 50) return 'excellent'
  if (renderTime.value < 100) return 'good'
  if (renderTime.value < 200) return 'fair'
  return 'poor'
})

const performanceText = computed(() => {
  if (renderTime.value < 50) return '优秀'
  if (renderTime.value < 100) return '良好'
  if (renderTime.value < 200) return '一般'
  return '较差'
})

// Watch 示例1: 深度监听搜索查询变化并记录搜索历史
watch(searchQuery, (newQuery, oldQuery) => {
  console.log(`搜索查询从 "${oldQuery}" 变为 "${newQuery}"`)
  
  // 重置到第一页
  currentPage.value = 1
  
  // 如果查询不为空且不同于之前的查询，记录到搜索历史
  if (newQuery && newQuery !== oldQuery && newQuery.length >= 2) {
    searchCount.value++
    
    // 避免重复记录相同的搜索词
    const existingIndex = searchHistory.value.findIndex(item => item.query === newQuery)
    if (existingIndex > -1) {
      // 更新时间戳
      searchHistory.value[existingIndex].timestamp = Date.now()
      searchHistory.value[existingIndex].count++
    } else {
      // 添加新的搜索记录
      searchHistory.value.push({
        query: newQuery,
        timestamp: Date.now(),
        count: 1,
        results: filteredUsers.value.length
      })
    }
    
    // 保持搜索历史不超过10条
    if (searchHistory.value.length > 10) {
      searchHistory.value = searchHistory.value.slice(-10)
    }
    
    // 保存到localStorage
    localStorage.setItem('userSearchHistory', JSON.stringify(searchHistory.value))
  }
}, { flush: 'post' }) // 在DOM更新后执行

// Watch 示例2: 监听过滤器变化并重置分页
watch(activeFilter, (newFilter, oldFilter) => {
  console.log(`过滤器从 "${oldFilter}" 切换到 "${newFilter}"`)
  currentPage.value = 1
  
  // 记录过滤器使用统计
  const filterStats = JSON.parse(localStorage.getItem('filterStats') || '{}')
  filterStats[newFilter] = (filterStats[newFilter] || 0) + 1
  localStorage.setItem('filterStats', JSON.stringify(filterStats))
})

// Watch 示例3: 监听用户列表变化并更新统计
watch(() => userStore.users, (newUsers, oldUsers) => {
  if (oldUsers) {
    console.log(`用户列表已更新: ${oldUsers.length} -> ${newUsers.length}`)
    previousUserCount.value = oldUsers.length
    
    // 检查是否有新用户
    if (newUsers.length > oldUsers.length) {
      console.log('检测到新用户添加')
      // 可以在这里触发通知
    }
    
    // 检查是否有用户被删除
    if (newUsers.length < oldUsers.length) {
      console.log('检测到用户被删除')
    }
  }
  
  updateCount.value++
}, { deep: true })

// Watch 示例4: 监听分页变化并记录页面访问
watch(currentPage, (newPage, oldPage) => {
  if (oldPage) {
    console.log(`页面从第 ${oldPage} 页切换到第 ${newPage} 页`)
    
    // 记录页面访问统计
    const pageStats = JSON.parse(localStorage.getItem('pageAccessStats') || '{}')
    pageStats[newPage] = (pageStats[newPage] || 0) + 1
    localStorage.setItem('pageAccessStats', JSON.stringify(pageStats))
    
    // 滚动到顶部
    nextTick(() => {
      document.querySelector('.user-table')?.scrollIntoView({ behavior: 'smooth' })
    })
  }
})

// Watch 示例5: 监听路由变化
watch(() => route.path, (newPath, oldPath) => {
  if (newPath === '/users' && oldPath && oldPath !== '/users') {
    console.log('用户从其他页面进入用户管理页面')
    
    // 记录页面访问时间
    const visitTime = Date.now()
    sessionStorage.setItem('userPageVisitTime', visitTime.toString())
    
    // 刷新数据（模拟）
    refreshData()
  }
})

// Watch 示例6: 监听组件更新性能
watch([paginatedUsers, searchQuery, activeFilter], async () => {
  const startTime = performance.now()
  
  // 等待DOM更新完成
  await nextTick()
  
  const endTime = performance.now()
  renderTime.value = Math.round(endTime - startTime)
  lastLoadTime.value = renderTime.value
  
  // 模拟内存使用监控
  if (performance.memory) {
    memoryUsage.value = Math.round(performance.memory.usedJSHeapSize / 1024 / 1024)
  } else {
    // 模拟内存使用
    memoryUsage.value = Math.round(Math.random() * 50 + 10)
  }
  
  console.log(`列表渲染完成，耗时: ${renderTime.value}ms`)
}, { flush: 'post' })

// 方法
const setFilter = (filterKey) => {
  activeFilter.value = filterKey
}

const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

const useSearchTerm = (term) => {
  searchQuery.value = term
  showSearchHistory.value = false
}

const hideSearchHistory = () => {
  // 延迟隐藏，以便点击历史项
  setTimeout(() => {
    showSearchHistory.value = false
  }, 200)
}

const clearSearchHistory = () => {
  searchHistory.value = []
  localStorage.removeItem('userSearchHistory')
  showSearchHistory.value = false
}

const clearSearch = () => {
  searchQuery.value = ''
  activeFilter.value = 'all'
}

const refreshData = async () => {
  const startTime = performance.now()
  
  // 模拟数据刷新
  await new Promise(resolve => setTimeout(resolve, 100))
  
  const endTime = performance.now()
  lastLoadTime.value = Math.round(endTime - startTime)
  
  console.log('数据刷新完成')
}

const getRoleText = (role) => {
  const roleMap = {
    admin: '管理员',
    moderator: '审核员',
    user: '普通用户'
  }
  return roleMap[role] || role
}

const getStatusText = (status) => {
  const statusMap = {
    active: '活跃',
    inactive: '禁用'
  }
  return statusMap[status] || status
}

const canEditUser = (user) => {
  return userStore.hasPermission('write') || user.id === userStore.userInfo.id
}

const canDeleteUser = (user) => {
  return userStore.hasPermission('delete') && user.id !== userStore.userInfo.id
}

const editUser = (user) => {
  console.log('编辑用户:', user)
}

const confirmDelete = (user) => {
  userToDelete.value = user
  showDeleteModal.value = true
}

const deleteUser = async () => {
  if (userToDelete.value) {
    const success = userStore.deleteUser(userToDelete.value.id)
    if (success) {
      console.log('用户删除成功')
    } else {
      console.error('用户删除失败')
    }
  }
  cancelDelete()
}

const cancelDelete = () => {
  showDeleteModal.value = false
  userToDelete.value = null
}

const formatRelativeTime = (timestamp) => {
  const now = Date.now()
  const diff = now - timestamp
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  return `${Math.floor(diff / 86400000)}天前`
}

// 生命周期
onMounted(() => {
  // 从localStorage加载搜索历史
  const savedHistory = localStorage.getItem('userSearchHistory')
  if (savedHistory) {
    try {
      searchHistory.value = JSON.parse(savedHistory)
    } catch (e) {
      console.error('加载搜索历史失败:', e)
    }
  }
  
  // 初始化用户数量
  previousUserCount.value = userStore.totalUsersCount
  
  console.log('用户列表组件已挂载')
})

onBeforeUnmount(() => {
  // 记录页面停留时间
  const visitTime = sessionStorage.getItem('userPageVisitTime')
  if (visitTime) {
    const stayTime = Date.now() - parseInt(visitTime)
    console.log(`用户在用户管理页面停留了 ${Math.round(stayTime / 1000)} 秒`)
  }
  
  console.log('用户列表组件即将卸载')
})
</script>

<style scoped>
.user-list {
  animation: fadeIn 0.3s ease-in-out;
  position: relative;
}

.search-box {
  position: relative;
}

.search-history-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.search-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #666;
}

.clear-history-btn {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: 11px;
}

.search-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-history-item:hover {
  background: #f5f5f5;
}

.history-query {
  font-size: 13px;
  color: #2c3e50;
}

.history-time {
  font-size: 11px;
  color: #95a5a6;
}

.search-stats {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 11px;
  color: #7f8c8d;
  margin-top: 4px;
}

.real-time-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-change {
  font-size: 11px;
  font-weight: 500;
}

.stat-change.positive {
  color: #27ae60;
}

.stat-change.negative {
  color: #e74c3c;
}

.stat-change.neutral {
  color: #95a5a6;
}

.filter-count {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 4px;
}

.btn-clear-search {
  margin-top: 12px;
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.load-time {
  font-size: 11px;
  color: #95a5a6;
  margin-left: 16px;
}

.performance-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  min-width: 250px;
}

.performance-panel h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 14px;
}

.performance-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.metric {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.metric label {
  color: #7f8c8d;
}

.metric span {
  color: #2c3e50;
  font-weight: 500;
}

.close-panel-btn {
  width: 100%;
  padding: 6px;
  background: #95a5a6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}

.performance-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.performance-toggle-btn:hover {
  transform: scale(1.1);
  background: #2980b9;
}

.excellent {
  color: #27ae60;
}

.good {
  color: #3498db;
}

.fair {
  color: #f39c12;
}

.poor {
  color: #e74c3c;
}

/* 继承原有样式 */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.list-header h3 {
  color: #2c3e50;
  margin: 0;
  font-size: 20px;
}

.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-input {
  width: 250px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
}

.filter-buttons {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.filter-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.filter-btn:hover:not(.active) {
  background: #f5f5f5;
}

.stat-card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-info h4 {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #7f8c8d;
  font-weight: 500;
}

.stat-info p {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.user-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: #3498db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.role-badge {
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.role-badge.admin {
  background: #e74c3c;
  color: white;
}

.role-badge.moderator {
  background: #f39c12;
  color: white;
}

.role-badge.user {
  background: #95a5a6;
  color: white;
}

.status-badge {
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.status-badge.active {
  background: #d5f5e3;
  color: #27ae60;
}

.status-badge.inactive {
  background: #fadbd8;
  color: #e74c3c;
}

.action-buttons {
  display: flex;
  gap: 6px;
}

.btn-action {
  padding: 4px 8px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
}

.btn-action.edit {
  background: #3498db;
  color: white;
}

.btn-action.delete {
  background: #e74c3c;
  color: white;
}

.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.page-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.page-btn:hover:not(:disabled):not(.active) {
  background: #f5f5f5;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.delete-modal .modal-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.delete-modal h3 {
  margin: 0 0 12px 0;
  color: #2c3e50;
}

.delete-modal p {
  margin: 0 0 20px 0;
  color: #7f8c8d;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-cancel {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.btn-confirm {
  padding: 8px 16px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .list-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .search-input {
    width: 100%;
  }
  
  .real-time-stats {
    grid-template-columns: 1fr;
  }
  
  .pagination {
    flex-direction: column;
    gap: 12px;
  }
  
  .performance-panel {
    bottom: 10px;
    right: 10px;
    left: 10px;
  }
  
  .performance-toggle-btn {
    bottom: 10px;
    right: 10px;
  }
}
</style> 